// 生产模式下的webpack配置

const path = require('path')
// 设置打包后的目标目录
const distPath = path.resolve(__dirname,'../dist')
const htmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
    // 1.打包模式：生产模式
    mode:'production',
    // 2.打包入口配置
    entry:'./src/main.js',
    // source-map作用，建立一个压缩后代码和源码的一个映射关系，如果没有该映射关系，报错位置不准确
    // 生产环境使用 source-map：报错位置精确到行和列
    devtool: 'source-map',
    // 3.打包出口配置
    output:{
        // 1. 文件名
        filename:'js/app.bundle.js',
        // 2. 文件目录
        path: distPath,
        // 3. 每次生成清空dist目录重新生成?
        clean: true,
        // 静态资源目录
        publicPath:'/'
    },
    // 4.配置打包的加载规则
    module:{
        rules:[
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            // 设置ejs文件的打包规则
            {
                test: /\.ejs$/,
                loader: 'ejs-loader',
                options: {
                   variable: 'data'  // 定义导入模板的变量名称
                }
            }
        ]
    },
    // 5.配置打包插件
    plugins:[
        new htmlWebpackPlugin({
            // template
            template: path.resolve(__dirname,'../public/index.html'),
            // filename:
            filename:'index.html',
            // inject 控制打包后 js 出现在 body标签中
            inject:'body'
        }),
        // 拷贝 public目录下所有资源，除了 index.html
        new CopyPlugin({
            patterns: [
                {
                    // 从哪个目录拷贝
                    from: path.resolve(__dirname, '../public'),
                    // 目标目录
                    to: distPath,
                    // 配置忽略文件
                    globOptions: {
                        ignore: ["**/index.html"]
                    }
                }
            ],
        })
    ],
    
    // 消除警告，静态资源超过250KB的警告
    performance: {
        hints: false,
    }
}